<template>
  <div>
  <el-dialog title="修改筛分级配" :visible.sync="visible" :close-on-click-modal="false" :close-on-press-escape="false"
    :before-close="doClose" top="0px" width="1200px">
    <div class="form-box">
      <el-form ref="editForm" :model="form" :rules="rules" label-width="80px" size="small" v-loading="loading">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="级配类型">{{ currentMatch.matchType }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="配方名称">{{ currentMatch.matchName }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="配方编号">{{ currentMatch.matchCode }}</el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="现场中心">{{ currentMatch.siteCenter }}</el-form-item>
          </el-col>-->
          <el-col :span="8">
            <el-form-item label="摊铺层级">{{ currentMatch.pavingLevelName }}</el-form-item>
          </el-col>
        </el-row>
        <el-table :data="form.dataList" style="width: 100%" border class="hotList" size="small">
          <el-table-column prop="sieveSize" label="筛孔" align="center">
            <template slot-scope="scope">{{ scope.row.sieveSize }}筛孔通过率</template>
          </el-table-column>
          <el-table-column label="设计生产级配" align="center">
            <template slot-scope="scope">
              <el-form-item :prop="'dataList.' + scope.$index + '.target'" :rules="rules.hotValue" label-width="0">
                <el-input-number v-model="scope.row.target" :min="0" ::max="100" :precision="2" :controls="false"
                  style="width: 100%"></el-input-number>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="gravel1" label="骨料1" align="center" :render-header="renderHeader"
            v-if="!!currentMatch.gravel1" key="gravel1">
            <template slot-scope="scope">
              <el-form-item :prop="'dataList.' + scope.$index + '.gravel1'" :rules="rules.hotValue" label-width="0">
                <el-input-number v-model="scope.row.gravel1" :min="0" ::max="100" :precision="2" :controls="false"
                  style="width: 100%"></el-input-number>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="gravel2" label="骨料2" align="center" :render-header="renderHeader"
            v-if="!!currentMatch.gravel2" key="gravel2">
            <template slot-scope="scope">
              <el-form-item :prop="'dataList.' + scope.$index + '.gravel2'" :rules="rules.hotValue" label-width="0">
                <el-input-number v-model="scope.row.gravel2" :min="0" ::max="100" :precision="2" :controls="false"
                  style="width: 100%"></el-input-number>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="gravel3" label="骨料2" align="center" :render-header="renderHeader"
            v-if="!!currentMatch.gravel3" key="gravel3">
            <template slot-scope="scope">
              <el-form-item :prop="'dataList.' + scope.$index + '.gravel3'" :rules="rules.hotValue" label-width="0">
                <el-input-number v-model="scope.row.gravel3" :min="0" ::max="100" :precision="2" :controls="false"
                  style="width: 100%"></el-input-number>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="gravel4" label="骨料4" align="center" :render-header="renderHeader"
            v-if="!!currentMatch.gravel4" key="gravel4">
            <template slot-scope="scope">
              <el-form-item :prop="'dataList.' + scope.$index + '.gravel4'" :rules="rules.hotValue" label-width="0">
                <el-input-number v-model="scope.row.gravel4" :min="0" ::max="100" :precision="2" :controls="false"
                  style="width: 100%"></el-input-number>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="gravel5" label="骨料5" align="center" :render-header="renderHeader"
            v-if="!!currentMatch.gravel5" key="gravel5">
            <template slot-scope="scope">
              <el-form-item :prop="'dataList.' + scope.$index + '.gravel5'" :rules="rules.hotValue" label-width="0">
                <el-input-number v-model="scope.row.gravel5" :min="0" ::max="100" :precision="2" :controls="false"
                  style="width: 100%"></el-input-number>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="gravel6" label="骨料6" align="center" :render-header="renderHeader"
            v-if="!!currentMatch.gravel6" key="gravel6">
            <template slot-scope="scope">
              <el-form-item :prop="'dataList.' + scope.$index + '.gravel6'" :rules="rules.hotValue" label-width="0">
                <el-input-number v-model="scope.row.gravel6" :min="0" ::max="100" :precision="2" :controls="false"
                  style="width: 100%"></el-input-number>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="powder1" label="粉料1" align="center" :render-header="renderHeader"
            v-if="!!currentMatch.powder1" key="powder1">
            <template slot-scope="scope">
              <el-form-item :prop="'dataList.' + scope.$index + '.powder1'" :rules="rules.hotValue" label-width="0">
                <el-input-number v-model="scope.row.powder1" :min="0" ::max="100" :precision="2" :controls="false"
                  style="width: 100%"></el-input-number>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="powder2" label="粉料2" align="center" :render-header="renderHeader"
            v-if="!!currentMatch.powder2" key="powder2">
            <template slot-scope="scope">
              <el-form-item :prop="'dataList.' + scope.$index + '.powder2'" :rules="rules.hotValue" label-width="0">
                <el-input-number v-model="scope.row.powder2" :min="0" ::max="100" :precision="2" :controls="false"
                  style="width: 100%"></el-input-number>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="powder3" label="粉料3" align="center" :render-header="renderHeader"
            v-if="!!currentMatch.powder3" key="powder3">
            <template slot-scope="scope">
              <el-form-item :prop="'dataList.' + scope.$index + '.powder3'" :rules="rules.hotValue" label-width="0">
                <el-input-number v-model="scope.row.powder3" :min="0" ::max="100" :precision="2" :controls="false"
                  style="width: 100%"></el-input-number>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="recycledMaterial" label="再生料" align="center" v-if="!!currentMatch.recycledMaterial"
            key="recycledMaterial">
            <template slot-scope="scope">
              <el-form-item :prop="'dataList.' + scope.$index + '.recycledMaterial'" :rules="rules.hotValue"
                label-width="0">
                <el-input-number v-model="scope.row.recycledMaterial" :min="0" ::max="100" :precision="2"
                  :controls="false" style="width: 100%"></el-input-number>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>
    <span slot="footer">
      <el-button size="mini" @click="doClose">取消</el-button>
      <el-button size="mini" type="primary" @click="doSubmit" :loading="submitting">确认</el-button>
    </span>
  </el-dialog>
</div>

</template>

<script>
import {
  getHotList,
  saveHot,
} from "@/api/bitumenMixingStation/matchingManage/screenTest";
export default {
  name: 'AsphaltMatchConfigHotEdit',
  props: {
    matchList: {
      type: Array,
      default: () => { }
    }
  },
  data() {
    return {
      visible: false,
      isAdd: false,
      type: 'save',
      loading: false,
      submitting: false,
      rules: {
        hotValue: [{ required: true, message: '', trigger: 'blur' }]
      },
      currentMatch: {},
      form: { dataList: [] }
    }
  },
  mounted() { },
  methods: {
    init(obj) {
      this.visible = true
      this.loading = true
      this.submitting = false
      this.form = {
        hots: []
      }
      this.currentMatch = obj;

      getHotList(obj.id)
        .then((res) => {
          let dataList = !!res.data ? res.data: [];
          dataList.forEach(item => {
            for (let key in item) {
              if (null == item[key]) {
                item[key] = undefined;
              }
            }
          });

          this.form = {
            dataList: dataList
          }
          this.loading = false
        })
        .catch(() => {
          this.form = {
            dataList: []
          }
          this.loading = false
        })
    },

    /**
     * 关闭弹窗
     */
    doClose() {
      this.visible = false
    },

    /**
     * 表单提交
     */
    doSubmit() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.submitting = true
          saveHot(this.currentMatch.id, this.form.dataList)
            .then((res) => {
              this.submitting = false
              this.$message.success('操作成功')
              this.doClose()
              this.$emit('success')
            })
            .catch(() => {
              this.submitting = false
            })
        }
      })
    },

    /**
     * 切换标题
     */
    renderHeader(h, { column, $index }) {
      let property = column.property + 'Name'
      let label = this.currentMatch[property]
      if (!label) {
        label = column.label
      }
      return h('div', {
        attrs: {
          class: 'cell'
        },
        domProps: {
          innerHTML: label
        }
      })
    }
  }
};
</script>

<style scoped>/* .form-box {
  height: 600px;
  overflow-y: auto;
}
.form-box::-webkit-scrollbar {
  display: none;
} */
.hotList>>>.el-form-item {
  margin-bottom: 0px;
}

.hotList>>>td {
  padding: 4px 0px;
}</style>